<template>
  <div class="wrap-container">
    <div class="flex">
      <div class="detail_l">
        <div class="bg-white py-3 px-4">
          <div class="flex justify-between">
            <div class="manage_tit">
              <div class="line"></div>
              <p>{{ getTitle() }}审核详情</p>
            </div>
            <div class="approval_btn">
              <template v-if="audit == '0'">
                <template v-hasPermi="['sys:approval:btn_coupon_approval']">
                  <el-button type="primary" @click="approveVisible = true">通过</el-button>
                  <el-button type="warning" @click="handleRejects">驳回</el-button>
                </template>
              </template>
              <el-button @click="goBack">返回</el-button>
            </div>
          </div>
        </div>
        <div class="block_item" v-loading="isLoading">
          <div class="detail_item" v-for="(item, index) in detailList" :key="index">
            <div class="block_top">
              <p>
                {{ getTitle() }}基本信息<span
                  >（{{
                    index == 0
                      ? '新'
                      : index != detailList.length - 1
                        ? '修改' + (detailList.length - index - 1)
                        : '原'
                  }}）</span
                >
              </p>
            </div>
            <div class="block_cont px-4" :style="{ opacity: index == 0 ? 1 : 0.6 }">
              <el-row>
                <el-col :span="5">
                  <div>
                    <p>
                      <span>{{ getTitle() }}编码：</span>{{ item.code }}
                    </p>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div>
                    <p>
                      <span>{{ getTitle() }}类型 ：</span>{{ handleCouponsType(item.type) }}
                    </p>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div>
                    <div class="flex">
                      <span>{{ getTitle() }}名称：</span>
                      <div class="flex-1 w-0 flex">
                        <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
                          <span class="tool_text">{{ item.name }}</span>
                        </el-tooltip>
                        <span class="text-color-D43030" v-if="item.nameStatus === '1'">（改）</span>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div>
                    <div class="flex">
                      <span>渠道备注：</span>
                      <div class="flex-1 w-0 flex items-center">
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="item.mname"
                          placement="top"
                        >
                          <span class="tool_text">{{ item.mname }}</span>
                        </el-tooltip>
                        <span class="text-color-D43030" v-if="item.mnameStatus === '1'"
                          >（改）</span
                        >
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div>
                    <div class="flex">
                      <span>场馆备注：</span>
                      <div class="flex-1 w-0 flex items-center">
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="item.bname"
                          placement="top"
                        >
                          <span class="tool_text">{{ item.bname }}</span>
                        </el-tooltip>
                        <span class="text-color-D43030" v-if="item.bnameStatus === '1'"
                          >（改）</span
                        >
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div>
                    <p>
                      <span>发布渠道：</span>
                      {{ handleSourceType(item.sourceType) }}
                      <span class="text-color-D43030" v-if="item.sourceStatus === '1'">（改）</span>
                    </p>
                  </div>
                </el-col>
                <el-col :span="5" v-if="item.type == '1' || item.type == '3'">
                  <div>
                    <p>
                      <span>优惠券面值：</span>
                      {{ item.faceValue }}元
                      <span class="text-color-D43030" v-if="item.faceValueStatus === '1'"
                        >（改）</span
                      >
                    </p>
                  </div>
                </el-col>
                <el-col :span="5" v-if="type == '0' && item.type == '3'">
                  <div>
                    <p>
                      <span>使用条件：</span>
                      订单满{{ item.thresholdAmount }}元可用
                      <span class="text-color-D43030" v-if="item.thresholdAmountStatus === '1'"
                        >（改）</span
                      >
                    </p>
                  </div>
                </el-col>
                <template v-if="type == '1'">
                  <el-col :span="5">
                    <div>
                      <p>
                        <span>卡券类型：</span>
                        <template v-if="item.type == '1'">次卡</template>
                        <template v-else-if="item.type == '2'">周卡</template>
                        <template v-else-if="item.type == '3'">月卡</template>
                      </p>
                    </div>
                  </el-col>
                  <el-col :span="5">
                    <div>
                      <p>
                        <span>使用次数：</span>{{ item.totalCount }}
                        <span class="text-color-D43030" v-if="item.totalCountStatus === '1'"
                          >（改）</span
                        >
                      </p>
                    </div>
                  </el-col>
                  <el-col :span="5">
                    <div>
                      <p>
                        <span>每天限次：</span>{{ item.dailyLimit }}
                        <span class="text-color-D43030" v-if="item.dailyLimitStatus === '1'"
                          >（改）</span
                        >
                      </p>
                    </div>
                  </el-col>
                </template>
                <el-col :span="5" v-if="(type == '0' && item.type == '2') || type == '1'">
                  <div>
                    <p>
                      <span>可抵扣时长：</span>{{ item.freeHours ? `${item.freeHours}小时` : '--' }}
                      <span class="text-color-D43030" v-if="item.freeHoursStatus === '1'"
                        >（改）</span
                      >
                    </p>
                  </div>
                </el-col>
                <!-- </template> -->
                <el-col :span="5">
                  <div>
                    <p>
                      <span>操作员：</span>
                      {{ item.createUserName }}
                      <span class="text-color-D43030" v-if="item.createUserStatus === '1'"
                        >（改）</span
                      >
                    </p>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div>
                    <p>
                      <span>创建日期：</span>
                      {{ item.updateTime }}
                    </p>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div>
                    <p>
                      <span>其他说明：</span>
                      {{ item.remark || '无' }}
                      <span class="text-color-D43030" v-if="item.remarkStatus === '1'">（改）</span>
                    </p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
      <div class="detail_r">
        <div class="order_track">
          <div class="order_top">
            <div class="manage_tit">
              <div class="line"></div>
              <p>{{ getTitle() }}审批流程</p>
            </div>
          </div>
          <div class="track_list">
            <div class="track_item" v-for="item in recordList" :key="item.id">
              <p class="create_time">{{ item.createTime }}</p>
              <div class="track_cont">
                <p v-if="item.type == null">{{ item.stepName }}</p>
                <template v-else>
                  <p>
                    {{ item.userName }}
                    <span class="text-color-808080">审核</span>
                    <span :style="{ color: item.stepColor }">{{
                      item.type == 1 ? '通过' : '驳回'
                    }}</span>
                  </p>
                  <p class="text-color-808080 text-xs mt-2px" v-if="item.type == 2">
                    说明：{{ item.stepName }}
                  </p>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 通过 -->
    <el-dialog
      v-model="approveVisible"
      width="439px"
      append-to-body
      :close-on-click-modal="false"
      :show-close="false"
      custom-class="dialog_center"
    >
      <template #header>
        <div class="dialog_top">
          <img src="@/assets/images/icon/dialog_warn.png" />
          <span>是否确认通过该{{ getTitle() }}的审批？</span>
        </div>
      </template>
      <div>
        <div class="tips_cont">
          <div>该{{ getTitle() }}基础参数已通过合规性验证</div>
        </div>
      </div>
      <template #footer>
        <div class="dialog_btn">
          <el-button type="primary" @click="handleApprove(1)">确定</el-button>
          <el-button @click="approveVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 驳回 -->
    <reject-reson-write ref="rejectResonRef" @submit="submitRejects" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { auditOrUnAudit, getAuditDetails, getOperationList } from '@/api/coupon/approval'
import RejectResonWrite from '@/components/Approval/rejectResonWrite.vue'
import { useDict } from '@/utils/dict'
import { ElMessage } from 'element-plus'

// 定义类型
interface DetailItem {
  code: string
  type: string
  name: string
  mname: string
  bname: string
  sourceType: string
  faceValue: string
  thresholdAmount: string
  totalCount: string
  dailyLimit: string
  freeHours: string
  createUserName: string
  updateTime: string
  remark: string
  nameStatus: string
  mnameStatus: string
  bnameStatus: string
  sourceStatus: string
  faceValueStatus: string
  thresholdAmountStatus: string
  totalCountStatus: string
  dailyLimitStatus: string
  freeHoursStatus: string
  createUserStatus: string
  remarkStatus: string
}

interface RecordItem {
  id: number
  createTime: string
  stepName: string
  type: number
  userName: string
  stepColor: string
}

// 使用 vue-router
const route = useRoute()
const router = useRouter()

// 字典数据（从全局 mixin 注入）
const { dict }: any = useDict({
  dicts: [],
})

// 响应式数据
const type = ref<string | null>(null) // "0"优惠券, "1"卡券
const couponId = ref<string | null>(null)
const isLoading = ref(false)
const recordList = ref<RecordItem[]>([])
const approvalStatus = ref<number | null>(null)
const approveVisible = ref(false)
const checked = ref(false)
const rejectReson = ref<string | null>(null)
const detailList = ref<DetailItem[]>([])
const audit = ref<string | null>(null)

// 组件引用
const rejectResonRef = ref<InstanceType<typeof RejectResonWrite> | null>(null)

// 方法定义
const getTitle = () => {
  return type.value == '0' ? '优惠券' : '卡券'
}

const getData = async () => {
  isLoading.value = true
  try {
    const { data } = await getAuditDetails({
      couponId: couponId.value,
    })
    detailList.value = data
  } finally {
    isLoading.value = false
  }
}

// 优惠券类型
const handleCouponsType = (val: string) => {
  let label = '--'
  if (type.value == '0') {
    const item = dict?.type?.coupon_type?.find((item: any) => item.value == val)
    label = item ? item.label : '--'
  } else {
    const item = dict?.type?.pass_type.find((item: any) => item.value == val)
    label = item ? item.label : '--'
  }
  return label
}

// 优惠券发布渠道
const handleSourceType = (val: string) => {
  const item = dict?.type?.platform_type.find((item: any) => item.value == val)
  return item ? item.label : '--'
}

// 获取审批流程
const getRecord = async () => {
  const { data } = await getOperationList({
    couponId: couponId.value,
  })
  recordList.value = data
}

// 通过/驳回审批
const handleApprove = async (val: number) => {
  const params = {
    couponId: couponId.value,
    auditStatus: val,
    remark: rejectReson.value,
  }
  await auditOrUnAudit(params)
  ElMessage.success('操作成功')
  router.go(-1)
}

// 驳回审批
const handleRejects = () => {
  if (rejectResonRef.value) {
    rejectResonRef.value.showRejectModal = true
    rejectResonRef.value.form.remark = ''
  }
}

// 确认驳回
const submitRejects = (val: string) => {
  rejectReson.value = val
  handleApprove(2)
}

// 返回
const goBack = () => {
  router.go(-1)
}

// 生命周期
onMounted(() => {
  type.value = (route.query.type as string) || null
  couponId.value = (route.query.id as string) || null
  audit.value = (route.query.audit as string) || null
  getData()
  getRecord()
})
</script>

<style lang="scss" scoped>
.wrap-container {
  .detail_l {
    flex: 1;
  }
  .approval_btn {
    display: flex;
    justify-content: flex-end;
    .el-button {
      width: 80px;
      height: 32px;
      line-height: 32px;
      border-radius: 6px;
      padding: 0;
      &.el-button--primary {
        background: #0988fb;
        border-color: #0988fb;
      }
      &.el-button--warning {
        background: #ff8d1a;
        border-color: #ff8d1a;
      }
      &.el-button--default {
        border-color: #a6a6a6;
        color: #383838;
        background: #fff;
      }
      & + .el-button {
        margin-left: 12px;
      }
    }
  }
  .block_item {
    background: #fff;
    padding: 15px;
    height: calc(100vh - 151px);
    overflow-y: auto;
    overflow-x: hidden;
    &:not(:first-child) {
      margin-top: 15px;
    }
    .detail_item {
      margin-bottom: 14px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .block_top {
      padding-bottom: 9px;
      border-bottom: 1px solid #e5e5e5;
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
    }
    .other_cont {
      border-top: 1px solid #a6a6a6;
      padding-top: 26px;
    }
    :deep(.el-row) {
      .el-col {
        &.el-col-5 {
          width: 20%;
        }
        & > div {
          margin-bottom: 16px;
          font-size: 14px;
          // min-width: 300px;
          span {
            &:first-child {
              color: #808080;
            }
          }
          .tool_text {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            color: #383838 !important;
          }
        }
      }
    }
  }
  .detail_r {
    margin-left: 15px;
    width: 367px;
    .order_track {
      background: #fff;
      padding: 10px 16px;
      height: calc(100vh - 80px);
      overflow: auto;
      .order_top {
        margin-bottom: 0;
        padding-bottom: 8px;
        border-bottom: 1px solid #e5e5e5;
      }
      .track_list {
        padding: 11px 12px 0;
        .track_item {
          margin-bottom: 11px;
          .create_time {
            color: #808080;
            line-height: 18px;
            font-size: 12px;
            margin-bottom: 2px;
          }
          .track_cont {
            font-size: 14px;
            line-height: 21px;
            margin: 2px 0;
            span {
              margin: 0 8px;
            }
            .green {
              color: #00baad;
            }
            .red {
              color: #d43030;
            }
            .primary {
              color: #2a82e4;
            }
          }
        }
      }
    }
  }
}
:deep(.dialog_center) {
  .el-dialog__header {
    padding: 22px 30px 0;
  }
  .el-dialog__body {
    padding: 15px 30px;
  }
  .dialog_top {
    display: flex;
    align-items: center;
    line-height: 24px;
    img {
      width: 20px;
      height: 17px;
    }
    span {
      font-size: 16px;
      color: #000;
      margin-left: 9px;
    }
  }
  .tips_cont {
    font-size: 14px;
    color: #000;
    line-height: 21px;
    margin-top: 7px;
  }
  .dialog_btn {
    display: flex;
    justify-content: flex-end;
    .el-button {
      border-radius: 6px;
      width: 89px;
      height: 32px;
      line-height: 32px;
      padding: 0;
      & + .el-button {
        width: 66px;
        margin-left: 22px;
      }
      &.el-button--default {
        background: none;
        border: 1px solid #e5e5e5;
        color: #383838;
      }
    }
  }
}
</style>
